<template>
  <div class="container">
    <div class="app-header">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-card shadow="always">
            <el-button type="primary" size="small" icon="el-icon-search">查询</el-button>
            <el-button type="primary" size="small" icon="el-icon-refresh-left" plain>重置</el-button>
            <el-button type="primary" size="small" icon="el-icon-chat-line-square" plain @click="() => saveFileType()">添加</el-button>
            <el-button type="primary" size="small" icon="el-icon-delete" plain>指定删除</el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="app-box">
      <el-tabs v-model="tabs" type="border-card" @tab-click="restore">
        <el-tab-pane label="数据列表" :disabled="able.v1" name="record">
          <FileTypeList />
        </el-tab-pane>
        <el-tab-pane label="详细信息" :disabled="able.v2" name="details">配置管理</el-tab-pane>
        <el-tab-pane label="添加" :disabled="able.v3" name="save">
          <AddFileType />
        </el-tab-pane>
        <el-tab-pane label="编辑" :disabled="able.v4" name="update">定时任务补偿</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import FileTypeList from './components/list'
import AddFileType from './components/add'

export default {
  components: {
    FileTypeList, AddFileType
  },
  data() {
    return {
      tabs: 'record',
      able: {
        v1: false,
        v2: true,
        v3: true,
        v4: true
      }
    }
  },
  methods: {
    // 添加按钮
    saveFileType() {
      this.tabs = 'save'
      this.able.v3 = false
    },
    // 还原
    restore(val) {
      if (val.name === 'record') {
        this.able = {
          v1: false,
          v2: true,
          v3: true,
          v4: true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  margin: 20px 20px;
}
.app-header{
  margin: 5px 0;
}

</style>
